<template>
  <div
    class="back-top"
    :style="{ right: right + 'px', bottom: bottom + 'px' }"
    @click="backTop"
    v-if="showBackTop"
  ></div>
</template>

<script>
export default {
  name: "BackTop",
  data() {
    return {
      flag: true,
      timer: null,
    };
  },
  props: {
    scrollTop: {
      type: Number,
      default: 0,
    },
    duration: {
      type: Number,
      default: 30,
    },
    spend: {
      type: Number,
      default: 10,
    },
    height: {
      type: Number,
      default: 1000,
    },
    right: {
      type: Number,
      default: 30,
    },
    bottom: {
      type: Number,
      default: 150,
    },
  },
  methods: {
    backTop() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        var now = this.scrollTop;
        var speed = (0 - now) / this.spend;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (this.scrollTop == 0) {
          clearInterval(this.timer);
        }
        this.flag = true;
        var total = this.scrollTop + speed;
        this.$emit("back-top", total);
      }, this.duration);
    },
  },
  computed: {
    showBackTop() {
      if (this.scrollTop >= this.height) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>

<style scoped>
.back-top {
  position: fixed;
  width: 100px;
  height: 100px;
  background: url("../../../assets/img/backtop/ic_btn_to_top.png") no-repeat;
  background-size: 100%;
}
</style>